<template>
  <div class="page-order">
    <header class="page-header">
      <!-- <span class="btn-left" @click="$router.go(-1)">
        <svg-icon icon-class="white-btn"></svg-icon>
      </span> -->
      <div class="header-content">我的订单</div>
    </header>
    <list-scroll :scroll-data="categoryData" :scrollX="true">
      <section class="order-tag">
        <span
          :class="{ active: orderType == 0 }"
          data-type="0"
          @click="selectTag"
          >全部</span
        >
        <span
          :class="{ active: orderType == 1 }"
          data-type="1"
          @click="selectTag"
          >待支付</span
        >
        <span
          :class="{ active: orderType == 2 }"
          data-type="2"
          @click="selectTag"
          >已完成</span
        >
        <span
          :class="{ active: orderType == 3 }"
          data-type="3"
          @click="selectTag"
          >已退款</span
        >
        <span
          :class="{ active: orderType == 4 }"
          data-type="4"
          @click="selectTag"
          >已失效</span
        >
      </section>
    </list-scroll>
    <section class="order-card">
      <ul class="order-list" v-for="(order, index) in orderList" :key="order">
        <li class="order-item">
          <div class="store-info">
            <span>订单ID：</span>
            <span>{{ order.orderNo }}</span>
          </div>
          <span>{{ order.statusName }}</span>
        </li>
        <li class="order-info">
          <img :src="order.sproduct.image" alt />
          <div class="order-detail">
            <p class="info-one">
              <span>{{ order.sproduct.name }}</span>
              <span>￥{{ order.sproduct.price / 100 }}</span>
            </p>
            <p class="info-two">
              <span>规格 {{ order.sproduct.color }}</span>
              <span>X {{ order.number }}</span>
            </p>
          </div>
        </li>
        <li class="order-count">
          <span>共{{ order.number }}件商品,小计:</span>
          <i>￥{{ (order.sproduct.price * order.number) / 100 }}</i>
        </li>
        <li class="footer" v-if="order.status === 1">
          <router-link
            :to="'/order/orderDetail?type=1&orderNo=' + order.orderNo"
          >
            <div class="pay-btn">立即支付</div>
          </router-link>
        </li>
        <!-- <li class="order-btn">
          <router-link tag="span" to="/order/cancelOrder">取消订单</router-link>
          <router-link tag="span" to="/order/orderDetail">去支付</router-link>
        </li> -->
      </ul>
      <ul class="order-list" v-if="!orderList || !orderList.length">
        <li class="img-cart">
          <svg-icon icon-class="shopping-cart"></svg-icon>
          <div class="notice">暂无订单</div>
        </li>
      </ul>
    </section>

    <!-- <section class="may-like">
      <ul class="like-list">
        <span class="like-title">猜你喜欢</span>
        <li class="like-item">
          <img class="item-picture" />
          <div class="item-detail">
            <p class="store-info">
              <img
                src="../../assets/image/product/store-headerM.png"
                class="header-img"
              />
              <label>店铺名称</label>
            </p>
            <p class="item-title">娜扎新装LOOK</p>
            <p class="item-count">
              <i>$248</i>
              <span>月销:888</span>
            </p>
          </div>
        </li>
        <li class="like-item">
          <img class="item-picture" />
          <div class="item-detail">
            <p class="store-info">
              <img
                src="../../assets/image/product/store-headerM.png"
                class="header-img"
              />
              <label>店铺名称</label>
            </p>
            <p class="item-title">娜扎新装LOOK</p>
            <p class="item-count">
              <i>$248</i>
              <span>月销:888</span>
            </p>
          </div>
        </li>
      </ul>
    </section> -->
  </div>
</template>

<script>
import ListScroll from "@/components/scroll/ListScroll";
import { getCurrentInstance, onMounted, reactive, ref, toRefs } from "vue";
import { useRouter, useRoute } from "vue-router";
export default {
  name: "Order",
  components: {
    ListScroll,
  },
  setup() {
    const orderType = ref(0);
    const app = getCurrentInstance().appContext.app;
    const ctx = app.config.globalProperties;
    const orderList = ref([]);
    const route = useRoute();
    const urlParams = route.query;

    const selectTag = (e) => {
      orderType.value = parseInt(e.currentTarget.getAttribute("data-type"));
      initData();
    };

    const state = reactive({
      categoryData: [],
    });

    onMounted(() => {
      const { status } = urlParams;
      console.log("status");
      orderType.value = status || 0;
      ctx.$eventBus.$emit("changeTag", status || 0);
      initData();
    });

    /**
     * 初始化订单列表
     */
    const initData = () => {
      const statusType = [
        "全部",
        "待支付",
        "已完成",
        "已退款",
        "已失效",
        "模拟支付",
      ];
      ctx.$http
        .post("/s_shop/order/orderList", {
          status: orderType.value,
        })
        .then((data) => {
          data.forEach((item) => {
            item.statusName = statusType[item.status];
          });
          orderList.value = data;
        });
    };

    return {
      orderType,
      selectTag,
      orderList,
      ...toRefs(state),
    };
  },

  methods: {},
};
</script>

<style scoped lang="scss">
.page-order {
  padding: 0 16px;
  height: 100%;
  .scroll-wrapper {
    height: 40px;
  }
  .page-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;

    .header-content {
      text-align: center;
      font-size: 18px;
      color: #3a3a3a;
      font-weight: 600;
      flex: 1;
    }
  }
  .order-tag {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: nowrap;
    overflow-y: scroll;
    span {
      height: 40px;
      line-height: 40px;
      font-size: 13px;
      width: 100%;
      display: inline-block;
      color: #949497;
      text-align: center;
      &.active {
        color: red;
        border-bottom: 2px solid red;
      }
    }
  }
  .order-card {
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    margin-top: 20px;
    .order-list {
      margin-top: 12px;
      .order-item {
        display: flex;
        justify-content: space-between;
        & > span {
          color: #d8182d;
          font-size: 11px;
        }
        .store-info {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-size: 10px;
          .header-img {
            width: 24px;
            height: 24px;
          }
          span {
            color: #3a3a3a;
            padding-left: 3px;
            font-size: 11px;
          }
        }
      }
      .order-info {
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
        img {
          width: 80px;
          height: 80px;
          display: inline-block;
          background-color: #d8182d;
          border-radius: 4px;
        }
        .order-detail {
          flex: 1;
          padding-left: 16px;
          padding-bottom: 4px;
          .info-one,
          .info-two {
            display: flex;
            justify-content: space-between;
            font-size: 11px;
          }
          .info-one {
            color: #3a3a3a;
            padding-bottom: 5px;
          }
          .info-two {
            color: #949497;
          }
        }
      }
      .order-count {
        display: flex;
        justify-content: flex-end;
        i {
          color: #d8182d;
          font-size: 14px;
          padding-left: 5px;
        }
        span {
          color: #3a3a3a;
          font-size: 11px;
        }
      }
      .footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 8px;
        .pay-btn {
          padding: 4px 8px;
          background-color: #00c365;
          color: white;
          border-radius: 4px;
        }
      }
      .order-btn {
        display: flex;
        justify-content: flex-end;
        padding-top: 14px;
        span {
          height: 26px;
          line-height: 20px;
          border: 1px solid #949497;
          color: #949497;
          font-size: 11px;
          padding: 2px 15px;
          border-radius: 2px;
          margin-left: 10px;
        }
      }
    }
    .img-cart {
      padding: 100px;
      text-align: center;
      .svg-icon {
        width: 100px;
        height: 100px;
      }
      .notice {
        margin-top: 30px;
        font-size: 14px;
        color: #666;
      }
    }
  }
  .may-like {
    padding-bottom: 20px;
    .like-list {
      .like-title {
        color: #d8182d;
        font-size: 18px;
      }
      .like-item {
        background-color: #fff;
        margin-top: 8px;
        border-radius: 4px;
        padding: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        .item-picture {
          width: 80px;
          height: 80px;
          display: inline-block;
          background-color: #d8182d;
          border-radius: 4px;
        }
        .item-detail {
          padding-left: 16px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: flex-start;
          flex: 1px;
          .store-info {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            img {
              width: 24px;
              height: 24px;
            }
            label {
              color: #3a3a3a;
              font-size: 11px;
              padding-left: 4px;
            }
          }
          .item-title {
            color: #3a3a3a;
            font-size: 14px;
            padding-top: 10px;
          }
          .item-count {
            padding-top: 4px;
            display: flex;
            justify-content: space-between;
            width: 100%;
            i {
              color: #d8182d;
              font-size: 14px;
            }
            span {
              font-size: 11px;
              color: #949497;
            }
          }
        }
      }
    }
  }
}
</style>
